<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="addModelObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>新增字典项</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              key：
            </div>
            <input type="text"
                   v-model="AddData.code"
                   @blur="blur"
                   placeholder="输入key，且不能重复"
                   class="modal-text f-l">
          </div>
          <div class="modal-row" v-show="spanShow === 'true'">
            <span class="span-show f-r">
              已存在请重新输入
            </span>
          </div>
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              value：
            </div>
            <input type="text"
                   v-model="AddData.name"
                   placeholder="输入value"
                   class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l">
              description：
            </div>
            <input type="text"
                   v-model="AddData.description"
                   placeholder="描述"
                   class="modal-text f-l">
          </div>


        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "AddDictionaryModel",
    props:["addModelObj"],
    data(){
      return {
        AddData: {
          name: '' ,   // 字典名称
          description: ''  ,         // 描述
          code: ''  ,         // 字典标识
          valid: 1            // 是否启用 0 不启用 1 启用
        },
        spanShow: 'false'
      }
    },
    methods:{
      //提交
      subBtn(){
        console.log(this.AddData);
        if(this.spanShow === 'error') {
          this.s_alert("key唯一判断接口存在问题！");
          return false;
        }
        if(this.spanShow === 'true'){
          this.s_alert("key重复不能新增！");
          return false;
        }
        if( this.verifyForm.isNull(this.AddData.name) ){
          this.s_alert("value不能为空！");
          return false;
        }
        if( this.verifyForm.isNull(this.AddData.code) ){
          this.s_alert("key不能为空！");
          return false;
        }
        let url = this.Dictionary + '/dict/tagId/';
        this.$axios({
          url: url
            +this.addModelObj.id
            +"/sort/0", //sort值目前默认给的0
          data: this.AddData,
          method: 'post'
        })
          .then(res => {
            //console.log(res);
            this.s_alert("新增成功！");
            this.s_logwrite("基础信息管理-字典管理","新增字典项");

            // alert("新增成功！");
            this.close();
          })
          .catch(res => {
            this.s_alert("新增失败！");
            // alert("新增失败！");
            //console.log(res);
          })
      },
      // 字典标识 code 失去焦点
      blur () {
        let _code = encodeURIComponent(this.AddData.code)
        let _url =  this.Dictionary
          + '/dict/selectCode?code='
          + _code
          + '&id='
          + this.addModelObj.id
        console.log(_url)
        this.$axios({
          url: _url,
          method: 'get'
        })
          .then(res => {
            this.spanShow = (!res.data).toString()
            console.log(res.data);
          })
          .catch(err => {
            // this.spanShow = 'error'
            console.log(err,"字典标识 code 唯一性")
          })
      },
      //关闭弹窗
      close(){
        this.$emit("addModelClose");
        this.clearData(); //关闭弹窗清除数据
      },
      //清除数据
      clearData(){
        this.AddData={
          name: '' ,   //字典名称
          description: '' ,         // 描述
          code: '' ,         // 字典标识
          valid: 1            // 是否启用 0 不启用 1 启用
        };
        this.spanShow = false;
      }
    }
  }
</script>

<style scoped>
  .span-show {
    color: #ff0000;
    line-height: 1.2;
  }
</style>
